<template>
	<view>
		<view style="width: 100%;padding-bottom: 20rpx ; border-radius: 20rpx ;" :style="'min-height:' + (windowHeight - 60) + 'px'" >
			<uploadingSnapshot v-show="page_index == 0" @report="report" @openSelectBox="openSelectBox" :imgList="img_list" v-on:isBack="toBack" @showDepName="showDepName()" :windowWidth="windowWidth" :windowHeight="windowHeight"
			 :naviBarHeight="naviBarHeight" :statusBarHeight="statusBarHeight" :departParam="depart_param"></uploadingSnapshot>
			 <myReport v-show="page_index == 1" v-on:isBack="toBack" :windowWidth="windowWidth" :windowHeight="windowHeight" :naviBarHeight="naviBarHeight" :statusBarHeight="statusBarHeight"></myReport>
			 <myDealing v-show="page_index == 2" v-on:isBack="toBack" :windowWidth="windowWidth" :windowHeight="windowHeight" :naviBarHeight="naviBarHeight" :statusBarHeight="statusBarHeight"></myDealing>
		</view>

		<view class="bottom-bar">
			<view class="bottom-bar__unit" @tap="clickTab(0)">
				<image class="img" :src="page_index == 0?'/static/icon/shangbao_icon_shang_1.png':'/static/icon/shangbao_icon_shang_0.png'" style="" mode=""></image>
				<view class="text" :class="page_index == 0?'pitch-on':''">
					上报
				</view>
			</view>
			<view class="bottom-bar__unit" @tap="clickTab(1)">
				<image class="img" :src="page_index == 1?'/static/icon/shangbao_icon_me_1.png':'/static/icon/shangbao_icon_me_0.png'" mode=""></image>
				<view class="text" :class="page_index == 1?'pitch-on':''">我的上报</view>
			</view>
			<view class="bottom-bar__unit" @tap="clickTab(2)">
				<image class="img" :src="page_index == 2?'/static/icon/shangbao_icon_chuli_1.png':'/static/icon/shangbao_icon_chuli_0.png'" mode=""></image>
				<view class="text" :class="page_index == 2?'pitch-on':''">我的处理</view>
			</view>
		</view>


		<view class="no" style="" v-if="is_deps_show">
			<view class="no__box" style="">
				<view class="no__box__title" style="">
					<view class="no__box__title__text" style="" @click="is_deps_show = !is_deps_show">
						取消
					</view>
				</view>
				<view class="no__box__content" style=""  >
						<view class="no__box__content__text" style="" v-for="(item,index) in deps_list" :key='index' @click="selectDepart(index)">
							{{item.departName}}
						</view>
				</view>
			</view>
		</view>
		
		<!-- +图片 弹出层-->
		<view v-if="is_show" class="pai" style="">
			<view class="pai__box" style="">
				<view class="pai__box__content" style="">
					<!-- <view class="pictureModal-unit" @click="addvideo">
						拍摄
					</view>
					<view class="" style="height:2rpx;width: 100%;background-color: rgba(247, 247, 247, 1);">
							
					</view> -->
					<view class="pictureModal-unit" @click="addCamera">
						拍照
					</view>
					<view class="" style="height:2rpx;width: 100%;background-color: rgba(247, 247, 247, 1);">
		
					</view>
					<!-- <view class="pictureModal-unit" @click="addAlbumVideo">
						从手机相册选择视频
					</view>
					<view class="" style="height:2rpx;width: 100%;background-color: rgba(247, 247, 247, 1);">
							
					</view> -->
					<view class="pictureModal-unit" @click="uploadImg">
						从手机相册选择图片
					</view>
					<view class="" style="width:100%;height:12rpx;background:rgba(247,247,247,1);">
		
					</view>
					<view class="pictureModal-unit" @click="hideModal()">
						取消
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uploadingSnapshot from '@/components/solveProblem/uploadingSnapshot.vue';
	import myReport from '@/components/solveProblem/myReport.vue';
	import myDealing from '@/components/solveProblem/myDealing.vue';
	export default {
		components: {
			uploadingSnapshot,
			myReport,
			myDealing,
		},
		data() {
			return {
				windowWidth: 0, //屏幕宽度
				windowHeight: 0, //屏幕高度
				titleHeight: 0, //状态栏和导航栏的总高度
				statusBarHeight: 0, //状态栏高度
				naviBarHeight: 0, //导航栏高度

				page_index: 0, //页面下标
				deps_list:[],
				is_deps_show:false,
				is_show: false,
				img_list:[],
				depart_param:{},
			}
		},
		onLoad() {
			let self = this;
			self.img_list = []
			const res = uni.getSystemInfoSync()
			const system = res.platform
			self.statusBarHeight = res.statusBarHeight
			if (system === 'android') {
				self.titleHeight = (48 + self.statusBarHeight)
			} else if (system === 'ios') {
				self.titleHeight = (44 + self.statusBarHeight)
			}
			self.naviBarHeight = self.titleHeight - self.statusBarHeight

			self.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			self.windowWidth = uni.getSystemInfoSync().windowWidth;
			self.windowHeight = uni.getSystemInfoSync().windowHeight;
			
			this.$appReport.fSysDepartGetDeps().then((res)=>{
				this.deps_list= res.data.result	
			})
			uni.$on('updateMyReport_event', function() {
				setTimeout(() => {
					self.page_index = 1
				},400)
			})
		},
		methods: {
			clickTab(index) {
				this.page_index = index;
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			//展开单位选择框
			showDepName() {
				this.is_deps_show = true
			},
			//选择上报单位
			selectDepart(index){
				this.depart_param = this.deps_list[index]
				this.is_deps_show = false
			},
			openSelectBox() {
				this.is_show = true
			},
			//拍照
			addCamera() {
				this.is_show = false
				uni.chooseImage({
					count: 6 - this.img_list.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //拍照
					success:(res)=> {
						wx.showLoading({
							title: '上传中...',
							mask: false
						});
						let tempFilePaths=  res.tempFilePaths
						
						var dataList = [];
						let imgs = [];
						dataList =dataList.concat(res.tempFilePaths);
						let uploadImgStr = tempFilePaths.join(',')
						imgs = dataList.map((value, index) => {
							return {
								name: "file",
								uri: value,
								file:value,
								
							}
						})
			
						const token =  uni.getStorageSync('token');
						
						for(var i=0;i<imgs.length;i++){
							
							var arr  = []
							arr.push(imgs[i])
							uni.uploadFile({
								url:"http://111.62.218.228:18081/smp/sys/common/upload",     // 后端api接口
								files: arr, // uni.chooseImage函数调用后获取的本地文件路劲
								name:'file',     //后端通过'file'获取上传的文件对象
								header:{
									"X-Access-Token":token,
								},
								formData: {
								    'biz': 'temp',
									'file':uploadImgStr
								},
								success:(res) => {
									wx.hideLoading();
									this.img_list.push(JSON.parse(res.data).message)
									uni.showToast({
										title: '图片上传成功',
										icon: 'none',
										duration: 2000
									})
								},
								fail:(err) =>{
									console.log(err)
									uni.showToast({
										title: '图片上传失败',
										icon: 'none',
										duration: 2000
									})
								}
							});
						}
			
			
			
					}
				});
			},
			//本地上传图片
			uploadImg(){
				this.is_show = false
				uni.chooseImage({
					count: 6 - this.img_list.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success:(res)=> {
						wx.showLoading({
							title: '上传中...',
							mask: false
						});
						let tempFilePaths=  res.tempFilePaths
						
						var dataList = [];
						let imgs = [];
						dataList =dataList.concat(res.tempFilePaths);
						let uploadImgStr = tempFilePaths.join(',')
						imgs = dataList.map((value, index) => {
							return {
								name: "file",
								uri: value,
								file:value,
								
							}
						})
			
						const token =  uni.getStorageSync('token');
						
						for(var i=0;i<imgs.length;i++){
							
							var arr  = []
							arr.push(imgs[i])
							console.log(arr);
							uni.uploadFile({
								url:"http://111.62.218.228:18081/smp/sys/common/upload",     // 后端api接口
								files: arr, // uni.chooseImage函数调用后获取的本地文件路劲
								name:'file',     //后端通过'file'获取上传的文件对象
								header:{
									"X-Access-Token":token,
								},
								formData: {
								    'biz': 'temp',
									'file':uploadImgStr
								},
								success:(res) => {
									wx.hideLoading();
									this.img_list.push(JSON.parse(res.data).message)
									console.log(this.img_list);
									uni.showToast({
										title: '图片上传成功',
										icon: 'none',
										duration: 2000
									})
								},
								fail:(err) =>{
									console.log(err)
									uni.showToast({
										title: '图片上传失败',
										icon: 'none',
										duration: 2000
									})
								}
							});
						}
			
			
			
					}
				});
			},
			//拍摄
			addvideo() {
				this.is_show = false
				uni.showToast({
					title: '该功能暂未开放',
					icon: 'none',
					duration: 2000
				})
				return
				uni.chooseVideo({
					sourceType: ['camera'],
					maxDuration: 10,
					success:(res)=> {
						wx.showLoading({
							title: '上传中...',
							mask: false
						});
						let tempFilePath=  res.tempFilePath
						
						var dataList = [];
						let imgs = [];
						dataList.push(res.tempFilePath);
						let uploadImgStr = tempFilePath
						imgs = dataList.map((value, index) => {
							return {
								name: "file",
								uri: value,
								file:value,
								
							}
						})
								
						const token =  uni.getStorageSync('token');
						
						for(var i=0;i<imgs.length;i++){
							
							var arr  = []
							arr.push(imgs[i])
							uni.uploadFile({
								url:"http://111.62.218.228:18081/smp/sys/common/upload",     // 后端api接口
								files: arr, // uni.chooseImage函数调用后获取的本地文件路劲
								name:'file',     //后端通过'file'获取上传的文件对象
								header:{
									"X-Access-Token":token,
								},
								formData: {
								    'biz': 'temp',
									'file':uploadImgStr
								},
								success:(res) => {
									console.log(res)
									wx.hideLoading();
									this.img_list.push(JSON.parse(res.data).message)
									console.log(this.img_list);
								},
								fail:(err) =>{
									console.log(err)
								}
							});
						}
								
					}
				})
			},
			// 视频
			addAlbumVideo() {
				this.is_show = false
				uni.showToast({
					title: '该功能暂未开放',
					icon: 'none',
					duration: 2000
				})
				return
				uni.chooseVideo({
					sourceType: ['album'],
					maxDuration: 10,
					success:(res)=> {
						wx.showLoading({
							title: '上传中...',
							mask: false
						});
						let tempFilePath=  res.tempFilePath
						
						var dataList = [];
						let imgs = [];
						dataList.push(res.tempFilePath);
						let uploadImgStr = tempFilePath
						imgs = dataList.map((value, index) => {
							return {
								name: "file",
								uri: value,
								file:value,
								
							}
						})
								
						const token =  uni.getStorageSync('token');
						
						for(var i=0;i<imgs.length;i++){
							
							var arr  = []
							arr.push(imgs[i])
							uni.uploadFile({
								url:"http://111.62.218.228:18081/smp/sys/common/upload",     // 后端api接口
								files: arr, // uni.chooseImage函数调用后获取的本地文件路劲
								name:'file',     //后端通过'file'获取上传的文件对象
								header:{
									"X-Access-Token":token,
								},
								formData: {
								    'biz': 'temp',
									'file':uploadImgStr
								},
								success:(res) => {
									console.log(res)
									wx.hideLoading();
									this.img_list.push(JSON.parse(res.data).message)
									console.log(this.img_list);
								},
								fail:(err) =>{
									console.log(err)
								}
							});
						}
								
					}
				})
			},
			hideModal(){
				this.is_show = false
			},
			report() {
				this.img_list = []
				this.depart_param = {}
			}
		}
	}
</script>

<style lang="scss">
	.bottom-bar {
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		height: 100rpx;
		padding: 0rpx 100rpx 0rpx 100rpx;
		background: #ffffff;
		border-top: 1rpx solid rgba(0,0,0,0.05);
		display: flex;
		align-items: center;
		justify-content: space-between;

		&__unit {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.img {
				width: 48rpx;
				height: 48rpx;
			}

			.text {
				font-size: 26rpx;
				color: #000000;
				min-width: 80rpx;
				display: flex;
				justify-content: center;
			}

			.pitch-on {
				border-bottom: 1px solid #FFFFFF;
				color: #3172B6;
			}
		}
	}


	.cu-modal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1110;
		opacity: 0;
		outline: 0;
		text-align: center;
		-ms-transform: scale(1.185);
		transform: scale(1.185);
		backface-visibility: hidden;
		perspective: 2000upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out 0s;
		pointer-events: none;
	}

	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}
	
	
	.pictureModal-unit {
		width: 100%;
		text-align: center;
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 22px;
		padding: 30rpx 0rpx;
	}
	.no {
		position: fixed;top: 0rpx;bottom: 0px;left: 0px;right: 0px;background: rgba(0, 0, 0, 0.6);
		&__box {
			position: absolute;bottom: 0rpx;left: 0;right: 0;
			&__title {
				flex: 1;background-color: #FFFFFF;border-radius: 12rpx 12rpx 0rpx 0rpx;height: 40rpx;display: flex;align-items: center;justify-content: flex-end;padding: 30rpx;
				&__text {
					font-size: 16px;
				}
			}
			&__content {
				flex: 1;height: 300rpx;display: flex;flex-direction: column;overflow-y: auto;-webkit-overflow-scrolling :touch; overflow-x: hidden; white-space: nowrap;background-color: #f6f6f6;
				&__text {
					font-size: 14px;padding: 16rpx;margin-top: 10rpx;background-color: #FFFFFF;
				}
			}
		}
	}
	.pai {
		position: fixed;top: 0rpx;bottom: 0px;left: 0px;right: 0px;background: rgba(0, 0, 0, 0.6);
		&__box {
			position: absolute;bottom: 0rpx;left: 0;right: 0;
			&__content {
				display: flex;flex-direction:column;background-color: #FFFFFF;border-radius: 48rpx 48rpx 0px 0px;
			}
		}
	}
</style>
